<template>
    <el-card>
        <el-form :model="form" label-width="auto">
            <el-form-item label="用户名">
                <el-input v-model="form.username"></el-input>
            </el-form-item>
            <el-form-item label="密码">
                <el-input v-model="form.password" type="password" show-password></el-input>
            </el-form-item>
            <el-form-item label="多选框">
                <el-checkbox-group v-model="form.checkbox">
                    <el-checkbox label="选项1"></el-checkbox>
                    <el-checkbox label="选项2"></el-checkbox>
                    <el-checkbox label="选项3"></el-checkbox>
                </el-checkbox-group>
            </el-form-item>
            <el-form-item label="单选框">
                <el-radio-group v-model="form.radio">
                    <el-radio label="选项1"></el-radio>
                    <el-radio label="选项2"></el-radio>
                    <el-radio label="选项3"></el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
    </el-card>
</template>

<script setup name="From">
    import { reactive } from 'vue'
    const form = reactive({
        username: '',
        password: '',
        checkbox: [],
        radio: ''
    })
</script>